<template>
	<view class="flex flex-y-start" @tap="choose_one(info,checked)">
		<view v-if="chat_checked" style="width: 70rpx;margin-top: 40rpx;padding-left: 20rpx;" class="flex flex-x-y">
			<view class="iconfont icon-xuanzhong color-all" style="font-size: 34rpx;width: 30rpx;" v-if="checked">
			</view>
			<view class="iconfont icon-weixuanzhong" style="font-size: 34rpx;width: 30rpx;" v-else></view>
		</view>
		<view class="flex-1 flex flex-y-start" :class="[!info.mine?'msg-left':'msg-right']"
			style="padding:32rpx 28rpx 0 28rpx;" :style="info.mine?'flex-direction: row-reverse;':''">
			<!-- 头像 -->
			<view class="msg-image-box" @tap.stop="to_detail">
				<!-- <image :lazy-load="true" :src="info.avatarUrl" mode="aspectFill"></image> -->
				<qq-image :url="info.avatarUrl" class="avatar-image"></qq-image>
			</view>
			<!-- 头像 -->
			<!-- 内容 -->
			<view style="max-width: 452rpx;" class="pr flex flex-y" :class="!info.mine?'flex-y-start':'flex-y-end'">

				<view v-if="!info.mine && chatType!='one'" @tap.stop="to_detail" class="msg-nickname fs-26">
					{{remark_obj[info.id] || remark_obj[info.fromid] || group_remark_obj[info.id] || info.name}}
				</view>
				<view class="flex flex-y-end" @longpress="edit_one">
					<view class="fs-24 read-status pr" v-if="info.mine &&  show_read_msg">
						<view :class="info.readFlag?'read-status1':'read-status2'">{{info.readFlag?'已读':'未读'}}</view>
					</view>
					<view class="msg-content pr" :class="['msg-content' + info.timestamp]"
						style="display: inline-block;">
						<view style="display: inline-block;">
							<text class="fs-28">{{info.content}}</text>
						</view>
					</view>
				</view>
				<!-- 回复内容 -->
				<view v-if="info.relationContent" class="flex">
					<view @tap.stop="change_more" class="relationContent fs-24" :class="show_more?'':'over-line2'"
						style="white-space: pre-line;word-break: break-word;">
						{{info.relationContent}}
					</view>
				</view>
				<!-- 回复内容 -->
			</view>
			<!-- 内容 -->
		</view>

	</view>
</template>

<script>
	export default {
		name: "msgText",
		props: {
			info: {
				type: Object,
				default: () => {},
			},
			chatType: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				checked: false,
				show_more: false,
			};
		},
		watch: {
			chat_checked(value) {
				this.checked = false;
			},

		},
		methods: {
			change_more() {
				this.show_more = !this.show_more;
			},
			to_detail() {
				if (this.chat_checked) return;
				return;
				if (this.info.mine) {
					this.toPage('/pages/chat/user?mine=true');
				} else {
					this.$emit('show', this.info);
				}
			},
			edit_one(e) {
				if (this.info.disabled) return;
				let obj = uni.createSelectorQuery().select('.msg-content' + this.info.timestamp, this);

				obj.boundingClientRect((data) => {

					let h = getApp().globalData.screenHeight;
					let scrollTop = e.changedTouches[0].pageY - e.changedTouches[0].clientY;

					console.log('scrollTop', data.top, data.width);
					let top = data.top;
					let style2 = '';
					let style = 'style1';
					if (h - top > 400) {
						// 下方显示
						top = top + data.height + 14;
						style = this.info.mine ? 'style2' : 'style1';
					} else {
						//上方显示
						top = top - 14;
						style2 = 'top';
						style = this.info.mine ? 'style4' : 'style3';
					}
					this.vuexSet('show_msg_edit', {
						top: top,
						style: style,
						style2: style2,
						info: this.info,
						powers: [
							'copy', 'collect', 'reply', 'check', 'back', 'delete', 'send'
						]
					});

				}).exec();

			},
		}
	}
</script>

<style lang="scss">
	.msg-content {
		background-color: #FFFFFF;
		padding: 20rpx 24rpx;
		// text-align: justify;

		color: #323232;
		white-space: pre-line;
		// word-break: break-all;
		word-break: break-word;
	}

	.msg-left {
		.msg-image-box {
			margin-right: 20rpx;
		}

		.msg-content {
			border-radius: 0px  30rpx   30rpx  30rpx;
		}


	}

	.msg-right {
		.msg-image-box {
			margin-left: 20rpx;
		}

		.msg-content {
			border-radius: 30rpx  0px   30rpx  30rpx;
			background-color: $bgColor;
			color: #FFFFFF;
		}


	}
</style>